  <!-- 商品编辑页面-->
<template>
  <el-container direction="vertical" style scoped>
     <el-row style="width:100%;background-color:#B7CEE5">
        <el-col :span="1"><img src="../assets/images/NO1.jpg" alt="" style="margin:30px 30px;width:70px;height:70px"></el-col>
        <el-col :span="19"><h2 style="color:#4F7298;font-family:cursive;font-size:30px;margin:50px 30px">雅黛美妆海外免税购管理员系统</h2></el-col>
          <el-col :span="4" style="margin-top:100px">
          <el-breadcrumb separator-class="el-icon-arrow-right"><!-- :to动态指定导航的路径或对象 -->
            <el-breadcrumb-item :to="{ path: '/admin' }">首页 </el-breadcrumb-item> 
          </el-breadcrumb>
        </el-col>
    </el-row>
   
     <el-row style="width:100%;">
          <!-- 侧边栏 -->
    <el-col style="width:10%;height:100%;" class="tac">
     <el-menu
      default-active="1" style="height:3800px"
      class="el-menu-vertical-demo"
      background-color="#7BA6D0"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
          <i class="el-icon-location"></i>
          <span  slot="title">商品修改管理</span> 
      </el-menu-item>  
    </el-menu>
    </el-col>

    <el-col style="width:90%;height:850px;background-color:#F1F8FA">
        <el-row style="width:100%;height:60px;background-color:#545c64;color:#fff;text-align:center;line-height:60px">
      <span style="margin:auto">修改商品信息</span>
        </el-row>
        <el-row style="margin-top:10px">
           <form enctype="multipart/form-data">
        <table style="width:60%;margin:auto;"  border="0" cellpadding="20" cellspacing="2" bgcolor="#BBD3EB">
                <tr>
                  <td style="background-color:#E9F7FD;text-align:center;width: 15%;">商品名称</td>
                  <td height="30" align="left" bgcolor="#FFFFFF">
                    <input type="text" placeholder="请输入商品名称" name="pname"  v-model="formdata.name">
                  </td>
                </tr>
                <tr>
                  <td style="background-color:#E9F7FD;text-align:center">商品图片</td>
                  <td height="30" align="left" bgcolor="#FFFFFF">
                    <input type="file" name="img"  @change="onFileChange">
                  </td>                              
                </tr>
                 <tr>
                  <td style="width:10%;background-color:#E9F7FD;text-align:center">商品编号</td>
                  <td style="width:90%">
                    <input type="text" placeholder="请输入商品编号" name="totalnum"  v-model="formdata.totalnum">
                  </td>
                </tr> <tr>
                  <td style="width:10%;background-color:#E9F7FD;text-align:center">商品单价</td>
                  <td style="width:90%">
                    <input type="text" placeholder="请输入商品价格" name="price"  v-model="formdata.price">
                  </td>
                </tr> <tr>
                  <td style="width:10%;background-color:#E9F7FD;text-align:center">商品描述</td>
                  <td style="width:90%">
                    <textarea name="desc" placeholder="请输入商品简介" cols="100" rows="6"  v-model="formdata.msg"></textarea>
                  </td>
                </tr> <tr>
                  <td style="width:10%;background-color:#E9F7FD;text-align:center">库存</td>
                  <td style="width:90%">
                    <input type="text" placeholder="请输入商品库存" name="inventory"  v-model="formdata.inventory">
                  </td>
                </tr> <tr>
                  <td style="width:10%;background-color:#E9F7FD;text-align:center">商品分类cid</td>
                  <td style="width:90%">
                    <input type="text" placeholder="请输入商品分类cid" name="cid"  v-model="formdata.cid">
                  </td>
                </tr>
                <tr>
                  <td height="30" align="center" bgcolor="#FFFFFF" colspan="2">
                    <input type="button" value="修 改" @click="editbutton">
                  </td>
                </tr>
        </table>
         </form>
        </el-row>
    </el-col>    
  </el-row>

  </el-container>
</template>
<script>
export default {
  data() {
    return {
      formdata: {
        name: "",
        totalnum: "",
        price: "",
        msg: "",
        inventory: "",
        cid: "",
        img: "",
      },
    };
  },
   methods: {
     onFileChange(event) {
      this.formdata.img  = event.target.files[0]; // 存储选中的文件;//files文件列表;  event.target事件触发的目标元素,target 指触发change 事件的元素
    },
    editbutton() {
      // 将表单中的数据以键值对的形式存储在FormData对象中，以便后续可以通过HTTP请求将其发送到服务器。
      let formData = new FormData(); // 创建一个新的FormData对象;
      formData.append("name", this.formdata.name); //""里为我name绑定的，将表单中的"name"字段的值利用append()方法添加到FormData对象的formData中
      formData.append("totalnum", this.formdata.totalnum);
      formData.append("price", this.formdata.price);
      formData.append("msg", this.formdata.msg);
      formData.append("inventory", this.formdata.inventory);
      formData.append("cid", this.formdata.cid);
      formData.append("img", this.formdata.img);
      formData.append("gid", this.formdata.gid);

      this.axios.post('/api/admin/editgoods', formData,{ //将formData对象作为请求体发送
         headers: {
            "Content-Type": "multipart/form-data", //告诉服务器请求体中包含文件和表单字段。用于包含文件上传的表单数据
          },
      })
        .then(response => { //处理异步操作成功时的回调函数
          console.log(response);
          this.$router.push('/admin')
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
    
    created(){
      // 添加一个判断条件，确保this.$route.params存在并且包含goods属性。如果不存在就给this.formdata赋予一个默认值
        if (this.$route.params && this.$route.params.goods) { 
            this.formdata = this.$route.params.goods;
        } else {
          this.formdata = { 
           name: "",
           totalnum: "",
           price: "",
           msg: "",
           inventory: "",
           cid: "",
           img: "",
        };
      }
    }
};
</script>
<style>
table td{
  background-color: #FFFFFF;
}
table input{
  width: 600px;
  height: 30px;
}
</style>
